<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>微水果订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
	    <link rel="stylesheet" href="css/jquery.mobile-1.4.3.css"/>
	    <style>
	    	h2{
	    		text-align: center;
	    	}
	    	table tr th,table tr td{
	    		text-align: center !important;
	    	}
	    </style>
	</head>

<body>

<div data-role="page" id="index">

    <div data-role="header" data-position="fixed">
        <h1>商城订单提交</h1>
    </div>

    <div role="main" class="ui-content">
        <div class="ui-field-contain">
            <label>姓名:</label>
            <input type="text" name="text-basic" id="search-begin" value="">
        </div>
        <div class="ui-field-contain">
            <label>电话:</label>
            <input type="text" name="text-basic" id="search-end" value="">
        </div>
        <div class="ui-field-contain">
            <label>地址:</label>
            <input type="text" name="text-basic" id="search-no" value="">
        </div>
        <div class="ui-field-contain">
		    <label for="date">日期：</label>
		    <input type="date" name="date" id="date" value="">
		</div>
        <div class="ui-field-contain">
            <label>品种:</label>
            <input type="text" name="text-basic" id="search-no" value="">
        </div>
       
        <div class="ui-field-contain">
            <label>备注:</label>
            <textarea ></textarea>
        </div>
        <input type="button" value="支付" id="search-submit">
        <ul data-role="listview" data-inset="true" id="list">
        </ul>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#index" data-icon="grid" class="ui-btn-active">查询</a></li>
                <li><a href="#detail" data-icon="star">我的</a></li>
            </ul>
        </div>
    </div>
</div>

<div data-role="page" id="detail">

    <div data-role="header" data-position="fixed">
        <h1>商城订单查询</h1>
    </div>

    <div role="main" class="ui-content">
        <h2>商城订单查询</h2>
        <table data-role="table" data-mode="columntoggle" class="ui-responsive" id="myTable">
        	 <thead>
	            <tr>
	                <th>品种</th>
	                <th>时间</th>
	                <th>价格</th>
	            </tr>
	            </thead>
	            <tbody>
	        	<tr>
	            	<td>红富士</td>
	            	<td>2018.02.03</td>
	            	<td>168元</td>
	            </tr>
	            <tr>
	            	<td>红富士</td>
	            	<td>2018.02.03</td>
	            	<td>168元</td>
	            </tr>
	            </tbody>
	       
        </table>
        <a href="#" class="ui-btn ui-corner-all" data-rel="back">返回</a>
    </div>

    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#index" data-icon="grid">查询</a></li>
                <li><a href="#detail" data-icon="star" class="ui-btn-active">我的</a></li>
            </ul>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.js"></script>
<script src="js/jquery.mobile-1.4.3.js"></script>
</body></html>